<template>
  <div class="group-visit">
    <div
      class="page-header"
      :style="
        rosterObj.content?.backgroundImage
          ? { backgroundImage: `url(${rosterObj.content?.backgroundImage})` }
          : {}
      "
      :class="{ 'has-bg': !!rosterObj.content?.backgroundImage }"
    >
      <div class="container">
        <h1 class="page-title">{{ rosterObj.title || "展商名录" }}</h1>
        <p class="page-subtitle" style="height: 30px">
          <!-- {{ "展商名录副标题" }} -->
        </p>
      </div>
    </div>
    <!-- 导航菜单 -->
    <div class="nav-menu">
      <div class="container">
        <nav class="about-nav">
          <a
            @click="setActiveTab('group-visit')"
            :class="['nav-item', { active: activeTab === 'group-visit' }]"
          >
            组团参观
          </a>
          <a
            @click="setActiveTab('visitor-preregistration')"
            :class="[
              'nav-item',
              { active: activeTab === 'visitor-preregistration' },
            ]"
          >
            观众预登记
          </a>
          <a
            @click="setActiveTab('visitor-notice')"
            :class="['nav-item', { active: activeTab === 'visitor-notice' }]"
          >
            观众须知
          </a>
          <a
            @click="setActiveTab('visa-system')"
            :class="['nav-item', { active: activeTab === 'visa-system' }]"
          >
            签证申请
          </a>
          <a
            @click="setActiveTab('visitor-roster')"
            :class="['nav-item', { active: activeTab === 'visitor-roster' }]"
          >
            展商名录
          </a>
          <a
            @click="setActiveTab('visitor-reviews')"
            :class="['nav-item', { active: activeTab === 'visitor-reviews' }]"
          >
            观众评语
          </a>
        </nav>
      </div>
    </div>
    <div class="visitor-roster">
      <div
        class="v-content container"
        v-html="rosterObj.content?.content"
      ></div>
      <!-- <div class="list" v-for="item in list" :key="item.id">
        <img
          class="item-img"
          :src="item.imageUrl"
          :alt="item.title"
          :title="item.title"
        />
      </div> -->
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { visitorApi, subpageApi } from "@/api/user";
import { ElMessage } from "element-plus";

const activeTab = ref("visitor-roster");
const pageData = ref({});
const bannerImage = ref("");
const list = ref([]);

// new add
const rosterObj = ref({});

const setActiveTab = (tabKey) => {
  if (!tabKey) return;
  activeTab.value = tabKey;
  if (tabKey !== "visitor-roster") {
    window.location.href = `/${tabKey}`;
  }
};

const loadPageData = async () => {
  try {
    const response = await subpageApi.getSubpageList(
      "visitors",
      "visitor-roster"
    );
    if (response.code !== "200") {
      ElMessage.error(response.msg || "加载展商名录失败");
      return;
    } else {
      rosterObj.value = response.data[0] || {};
    }
    console.log(response.data, "res");
    // if (
    //   response &&
    //   response.code === "200" &&
    //   response.data &&
    //   response.data.length > 0
    // ) {
    //   // 取第一条作为页面基本信息
    //   const firstItem = response.data[0];
    //   pageData.value = {
    //     title: firstItem.title || "组团观展",
    //     subtitle: firstItem.description || "为团体观众提供专业的参观服务",
    //     content: firstItem.content || "",
    //   };
    // } else {
    //   // 使用默认数据
    //   pageData.value = {
    //     title: "组团观展",
    //     subtitle: "为团体观众提供专业的参观服务",
    //     content: "",
    //   };
    // }
  } catch (error) {
    console.error("加载展商名录数据失败:", error);
    pageData.value = {
      title: "组团观展",
      subtitle: "为团体观众提供专业的参观服务",
      content: "",
    };
  }
};

const loadBanner = async () => {
  try {
    // 与观众中心入口页保持一致：统一取 carousel_visitors 顶部图
    const res = await subpageApi.getContentByType("carousel_visitors");
    if (
      res &&
      (res.code === "200" || res.code === 200) &&
      Array.isArray(res.data) &&
      res.data.length > 0
    ) {
      const firstActive =
        res.data.find((item) => item.status === "active") || res.data[0];
      bannerImage.value = firstActive.imageUrl || firstActive.image || "";
    }
  } catch (e) {
    bannerImage.value = "";
  }
};

const getList = () => {
  visitorApi.visitorRoster().then((res) => {
    if (res.code === "200") {
      console.log(res.data);

      list.value = res.data;
      rosterObj.value = res.data[0] || {};
      // 解析富文本内容
      rosterObj.value.content = parseContent(rosterObj.value?.content);
      console.log(rosterObj.value, "res");
    } else {
      ElMessage.error(res.msg);
    }
  });
};

// 解析富文本内容
const parseContent = (content) => {
  if (!content)
    return {
      content: "",
      company: "",
      position: "",
      avatar: "",
      date: "",
      exhibition: "",
    };

  try {
    if (typeof content === "string" && content.trim().startsWith("{")) {
      return JSON.parse(content);
    }
    return {
      content: content,
      company: "",
      position: "",
      avatar: "",
      date: "",
      exhibition: "",
    };
  } catch (e) {
    return {
      content: content,
      company: "",
      position: "",
      avatar: "",
      date: "",
      exhibition: "",
    };
  }
};
onMounted(() => {
  // loadBanner();
  // loadPageData();
  getList();
});
</script>

<style scoped>
.group-visit {
  min-height: 100vh;
  /* background: linear-gradient(135deg, #320063 0%, #4a0a8a 100%); */
}

.page-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 120px 0 80px 0;
  margin-top: 0;
  text-align: center;
  color: white;
}

.page-header.has-bg {
  height: 400px;
  position: relative;
  background: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-header.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.page-header.has-bg .container {
  position: relative;
  z-index: 1;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.page-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 0;
}
.nav-menu {
  background: #f8f9fa;
  padding: 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.about-nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.nav-item {
  text-decoration: none;
  color: #333;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: 1px solid #eee;
  cursor: pointer;
}

.nav-item:hover {
  background-color: var(--e-global-color-selected);
  color: white;
  border-color: var(--e-global-color-selected);
}

.nav-item.active {
  background-color: var(--e-global-color-selected);
  color: white;
  border-color: var(--e-global-color-selected);
}

.v-content {
  padding-top: 50px;
  max-width: 1340px !important;
  /* display: flex;
  flex-wrap: wrap; */
}

.list {
  display: flex;
  flex-wrap: wrap;
}

.item-img {
  width: 185px;
  height: 110px;
}
@media (max-width: 768px) {
  .about-nav {
    gap: 15px;
  }

  .group-section {
    padding: 1rem;
  }

  .nav-item {
    font-size: 1rem;
    padding: 8px 16px;
  }
}
:deep(.resizable-image) {
  width: 185px !important;
  height: 110px !important;
  object-fit: cover;
  vertical-align: middle;
}
</style>
